This document explains you step by step how to create a basic animation with GifBuilder. If you have further questions, please read the document "Documentation" which describes all the features of GifBuilder.
In this tutorial, we will use GifBuilder to create an animation based on two PICT images and SimpleText to write the HTML code which makes the animation appear inline in hypertext. Several ways to serve this document to the World Wide Web will be described.
1. Making the animation
1.1. Use any drawing program to draw the frames. Save them as PICT (or picture), GIF, TIFF or Photoshop formart in the same folder to make their use easier later. In our example, we will use drawings made with ClarisWorks saved as PICT.
1.2. Launch GifBuilder. To have the same settings as us, restore the default ones by choosing Reset to Factory Settings in the Options menu.
1.3. Make sure that the Frames window and the Untitled.gif (Preview window) are open. If some of them are hidden, choose Frames Window and Preview Window in the Window menu. If you have already opened an animation, choose New in the File menu.
In GifBuilder, only one document can be handled at a time. The three windows can be visible or hidden; contrary to document-based applications, closing a window only hides it and never discards changes or proposes you to save the animation.
1.4. Move the windows so that both the Frames window of GifBuilder and the window of the folder "Tutorial" in the Finder are visible. Whether GifBuilder or the Finder is active does not matter.
1.5. Select the files "1st frame ("Animations")" and "2nd frame ("are cool")" in the Finder and drag them to the Frames window of GifBuilder. These files will appear in the Frames window, and the first frame will be displayed in the Preview window.
ﾊ
1.6. The frames may be in order or out of order, depending on the way the Finder sorts their files. You have several ways to set the order you want. Firstly, you can drag the selected frame anywhere in the list of frames. Secondly, you can sort the frames based on their name or reverse the selected frames, by choosing Sort Selection or Reverse Selection in the Edit menu, respectively.
At this stage, you could choose Save in the File menu and have a ready-to-use animated GIF. We will check some options first, however.
1.7. In the Frames window, the first column usually indicates the name of the frames. To display each frame there, choose Show Frames in the Window menu. To make some place, only the frame number is displayed.
The other columns of the Frames window show the settings associated to them. They correspond to the second group of entries in the Options menu.
ﾊ
1.8. To change the frame options, first select the frames you want to change the settings of, and then choose a new setting in the Options menu. Let us change the frame delay first. Choose Select All in the Edit menu to select both frames; then choose Interframe Delay in the Options menu. The Interframe Delay dialog box is displayed.
ﾊ
You should usually avoid the option "as fast as possible", because it can go really too fast on modern computers. For our animation, let us choose 100/100 seconds, i.e. one second.
1.9. When the animation will be downloaded on the Web, its speed will be limited by the network speed. Furthermore, it will begin playing before the whole page is rendered. To let the netsurfer watch the animation nicely, you will probably want to repeat the animation several times (note that some old browsers don't support that) or forever. Let us select this later option. Choose Loop in the Options menu, and click Forever.
ﾊ
You can preview your animation by choosing Start in the Animation menu.
1.10. Depending on how you have created the frames, drawings may not be correctly aligned between frames, resulting in a jerky animation. Stop the animation by choosing Stop in the Animation menu. To align the second frame with respect to the first one, select the second frame in the Frames window. Then drag the frame in the preview window. Holding down the Option key (labelled "alt" on extended keyboards) let you see the previous animation state (usually the previous frame) throw the frame you move.
ﾊ
1.11. When you create a new animation, its size is set automatically so that it contains the largest frame (or more correctly the bottom-left most frame). This automatic sizing is indicated by the brackets around the animation size in the Frames window. There are two ways to change the animation dimension. You could choose Image SIze in the Options menu; but let us do it more interactively. Hold down the Control key (marked "ctrl") and drag over the Preview window to delimit the area you want to keep. If you are not satisfied, click anywhere outside the rectangle, and try again. You can also move the bounds of the selected area by holding down the Control key and using the arrow keys. When everything is fine, click in the rectangle. Note that the size of the frames, displayed in the second column of the Frames window, have not changed; only the dimension of the animation itself and the position of each frame has been modified. The portion of frames outside the animation bounding rectangle are left out when the animation is saved. Like with all the commands that changes the frames or their settings, you can undo animation cropping by choosing Undo in the Edit menu.
1.12. Let us save the animation now. Select Save in the File menu. Since this is a new animation, you will be prompted for a new file. Most web servers prefer file names without spaces and other strange characters, and ending with the prefix ".gif". Letters, digits, dashes and underscores are safe on most decent platforms. You can save the animation anywhere, but putting it in the same folder as the HTML document which uses it is more convenient.
You can also drag the small file icon in the preview window to any location in the Finder.
ﾊ
1.13. To make sure that your browser display correctly the animation, drag its file onto its icon or in an open window.
1.14. To make the animation background transparent, you could select all the frames (Select All in the Edit menu), then choose Transparency/Based on First Pixel in the Options menu. Then typical browsers would replace the area that has the same color as the top left corner of your animation (white in our case) with the background color or the background image of the HTML page. But since we will add a transition that is nicer with a visible animation background, we won't do it now.
2. Adding transitions
Transitions are a convenient way to add the little touch that will draw the attention of your users. Of course, you can also draw each frame manually to have exactly the frames you want; but often, you will find the built-in transitions very useful.
Our two-frame animation is not that hot; let us make it very cool.
2.1. There is a set of transitions in the Transitions sub-menu of the Effects menu. We will choose Peel to give the effect of someone peeling sheets of paper to reveal progressively each frame. Transitions are additional frames based on two frames. But you select always the frames revealed by the transition. For our animation, we will select both frames; the first transition will occur between the last frame and the first one, and will be inserted at the beginning; the second transition will occur between the first frame and the second one, and will be inserted between them.
2.2. Once the frames are selected, choose Peel in the Effects/Transitions sub-menu.
ﾊ
2.3. The number of steps is one more than the frames inserted between each couple of frames. The more steps, the more progressive the transition. Let us choose 8.
2.4. You can choose the direction. Peeling from the top left corner to the bottom right corner is fine, so let us keep it this way.
2.5. Sheets can be translucent, so that the drawing can be seen on the back ("Old Frame"), or the ink can be printed on the back of the next frame ("New Frame"). This is really a matter of personal taste.
2.6. You can change the color of the back. For our animation, we will choose green. By clicking the Color button, you can change it.
2.7. The Alpha value specifies the amount of color with respect to the amount of drawing on the back. The maximum value is 255 for a totally saturated tint, with no drawing; with a value of 0, the back is a copy of the frame. 100 is a good value.
2.8. Click OK, and the new frames will be calculated. Their interframe delay is set to the default value.
ﾊ
Note that the frames created for the transitions are in italic. Frames whose name is displayed in roman correspond to image files, while frames whose name is in italic correspond to images in memory. This is important, because you can open image files in their own application by double-clicking there name, and you must keep them until the animated GIF is saved (you can discard them afterwards). Frames in memory can only be edited with cut & paste.
2.9. After the transitions are calculated, the new frames are selected. This makes changing the delay very easy. Select Interframe Delay in the Options menu, and set the value to 20/100 second.
2.10. Save the result by choosing Save in the File menu.
3. Writing the HTML code
You can use your preferred HTML editor to create HTML documents and import animated GIFs. Animated GIFs can be used exactly like any other GIF file. We are going to use a simple text editor, SimpleText, to see the exact syntax of the HTML tag used for this purpose and how to let GifBuilder do most of the job.
3.1. Launch SimpleText (the text editor included with MacOS and many Macintosh software).
3.2. Type in a new document the following text:
<html>
<title>My First Animated GIF</title>
<head>
</head>
<body>
<h1>My First Animated GIF</h1>
<p>Here is my first animated GIF:</p>
<p>
3.3. To display the animation, you use exactly the same HTML <img> tag as for plain static images. Using Copy HTML Image Tag, in the Edit menu of GifBuilder, you can get the code fragment with the correct file name and image size ready to be pasted in your HTML document. Or if your editor supports Drag and Drop, you can drag the </> icon from the preview window of GifBuilder to your HTML code.
ﾊ
3.4. If the image is not in the same folder as the HTML document, you must adjust the URL to reflect its correct location. You can also add an "alt" element, so that netsurfers who choose not to download inline images know what they're missing.
3.5. Save your HTML document with a name ending with ".html".
3.6. Open it in your browser to check the result.
4. Serving the document
If you have your own web server running on your Macintosh, you can copy the animated GIF and the HTML document in a place where the server can get it. But if you use FTP (File Transfer Protocol, a standard way to upload and download files across Internet) to upload your files to a server, here is how to do it smoothly.
4.1. If you use Anarchie, select either Automatic or Binary in the FTP menu. If you use Fetch, select either the Automatic or Binary radio button in the ftp window. Then drag the animated GIF from the Finder to the server window.
4.2. Check the result by downloading the HTML document in your browser. If the animation is corrupted or does not loop, transfer it again in binary transfer mode.
Small Print
This document is Copyright 1995-1996, Yves Piguet. All rights reserved.
The author makes no warranty with respect to this document, its quality, accuracy, or fitness for a particular purpose. As a result, this document is provided "as is", and the user is assuming the entire risk as to its quality and accuracy.
Marks mentionned here are for information only; most of them are trade marks or registered trade marks.
